<template>
  <div class="news-list page-common">
    <!--实现新闻列表-->
    <ul class="mui-table-view">
      <li class="mui-table-view-cell mui-media" v-for="item in newList" :key="item.id">
        <router-link v-bind="{to:'/news/newsinfo/'+item.id}">
          <img class="mui-media-object mui-pull-left" :src="item.img_url">
          <div class="mui-media-body">{{item.title}}<p class='mui-ellipsis'>{{item.zhaiyao}}</p>
            <div class="focus-item">
              <span>发表时间：{{item.add_time |datefmt('YYYY-MM-DD HH:mm:ss')}}</span>
              <span class="click-num">点击数：{{item.click}}</span>
            </div>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
 import common from '../kits/common.js';
  export default {
    data() {
      return {
          newList:[]
      }
    },
    components: {},
    methods:{
      getnewListDate(){
//       let  url = common.apidomain +'newList';
        this.axios.get("../static/newList.json",{}).then(res => this.newList = res.data.message);
      // 4.0 判断响应报文体中的状态值，如果是非0则将服务器响应回来的错误消息提示给用户
        /*注意：这里需要判断是否请求数据*/
      }
    },
    created(){
      this.getnewListDate();
    }
  }

// datefmt 时间一般都是用全局的，因为页面很多处要用，则必须在webpack的入口文件中注册，就是在main.js中注册


</script>
<style scoped>
  .news-list{
    text-align: left;
  }
  .mui-media-body{
    font-size: 16px;
    color:#666;
  }
  .focus-item{
    font-size: .12rem;
    color:deepskyblue;
  }
  .click-num{
    margin-left: 30px;
  }
</style>
